select option

在第四日表單綁定有提到如何在表單呈現資料，來說說多一點細節。
官網連結：表单输入绑定 选择框

v-for

跟 v-for搭配使用，輕鬆做出一堆 <option>，我們來把第四日的code改寫成：

<select v-model='selected'>
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>
<span>讓我對你說聲： {{ selected }}</span>

說什麼呢？請看～

new Vue({
  el: '...',
  data: {
    selected: 'no', //預設選擇
    options: [
      { text: '不要這樣子', value: 'no' },
      { text: '不可以這樣', value: 'unallowed' },
      { text: '再這樣我打死你', value: 'go to hell' }
    ]
  }
})

注意！ option(不是指<option>)是動態屬性，value要寫成 :value

multiple

單複選混合，在 <select> 裡加上一個multiple attribute：

<select v-model="selected" multiple>

但我認為這樣對 user而言不明顯，要自行用cmd/ctrl或shift點選才會變複選，
使用 checkbox應是比較理想的

checkbox

可以做成打勾時跟還沒打勾時是顯示兩個不同值，使用true-value false-value

<input type='checkbox' id='checkStatus' v-model='checkStatus' true-value='我被勾了' false-value='快來勾我'>
<label for='checkStatus'>{{ checkStatus }}</label>

表單的修飾符

lazy

絕對不是在說你，是說我的貓 原本在<input>輸入什麼就會同步性很高的顯示出來，
加入 lazy可以讓我們從輸入時(input時)就變更，改成框外點擊後(chage後)才變更顯示

<input v-model.lazy="msg" >

number

這個聽說超級常用，長得也是超級常用的臉。
把輸入的值轉為 number型別，原本是 string，
即使我們在<input>寫了 type = number，還是會返回string。

<input v-model.number="age" type="number">

trim

自動除去輸入時的首尾空白

<input v-model.trim="msg">

小結

在打'修飾符'三個字時，mac內建的注音輸入法一直沒有自動學習成常用語彙，
所以安裝超注音輸入法來試試看，也有人推薦嗎？
Mac 內建注音輸入法太笨？試試超注音輸入法吧！
結果覺得介面不好看，容錯率超低！索性在電腦上也用拼音好了...